<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>雾霾定位探测系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Weather Report Widget template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- Custom Theme files -->
    <!-- Custom Theme files -->
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css" media="all" />
    <link th:href="@{/css/owl.carousel.css}" rel="stylesheet" type="text/css" media="all">
    <!-- //Custom Theme files -->
    <!-- js -->
    <script type="application/javascript" th:src ="@{/js/jquery-2.2.3.min.js}"></script>
    <script type="application/javascript" th:src = "@{/js/owl.carousel.js}"></script>
    <script>
        $(document).ready(function() {
            $("#owl-demo").owlCarousel({
                autoPlay: 3000, //Set AutoPlay to 3 seconds
                items : 3,
                itemsDesktop : [768,3],
                itemsDesktopSmall : [414,4]
            });

        });
    </script>
    <script type="text/javascript" th:src="@{/js/echart.js}"></script>
    <script type="text/javascript" th:src="@{/js/skycons.js}"></script>
<!--
    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>&lt;!&ndash;web font&ndash;&gt;
-->
    <link th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:700,600,400,300'}" href='http://fonts.googleapis.com/css?family=Open+Sans:700,600,400,300' rel='stylesheet' type='text/css'>

</head>
<body th:if="${fh.wea}">
<!-- main -->
<div class="main-agileits">
    <h1><b>雾霾定位探测系统</b></h1>
    <div class="main-wthree-row">
        <div class="agileinfo-text">
            <div class="date">
                <!-- Date-JavaScript -->
                <script type="text/javascript">
                    var mydate=new Date()
                    var year=mydate.getYear()
                    if(year<1000)
                        year+=1900
                    var day=mydate.getDay()
                    var month=mydate.getMonth()
                    var daym=mydate.getDate()
                    if(daym<10)
                        daym="0"+daym
                    var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
                    var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
                    document.write(""+dayarray[day]+" <br> "+daym+"  "+montharray[month]+"  "+year+"")
                </script>
                <!-- //Date-JavaScript -->
            </div>
            <h2 class="temp">&nbsp;</h2>
            <h4 class="location"></h4>
            <h6 class="weather"></h6>
        </div>
        <div class="w3layouts-slider">
            <div id="owl-demo" class="owl-carousel owl-theme">
                <div class="item agile-item">
                    <h6>空气质量</h6>
                    <br>
                    <h6 class="quality"></h6>
                </div>
                <div class="item agile-item">
                    <h6>质量指数</h6>
                    <br>
                    <h6 class="aq"></h6>
                </div>
                <div class="item agile-item">
                    <h6>PM2.5</h6>
                    <br>
                    <h6 class="pm25"></h6>
                </div>
                <div class="item agile-item">
                    <h6>二氧化硫</h6>
                    <br>
                    <h6 class="so2"></h6>
                </div>
                <div class="item agile-item">
                    <h6>二氧化氮</h6>
                    <br>
                    <h6 class="no2"></h6>
                </div>
                <div class="item agile-item">
                    <h6>外出建议</h6>
                    <br>
                    <h6 class="waichu"></h6>
                </div>
                <div class="item agile-item">
                    <h6>臭氧</h6>
                    <br>
                    <h6 class="o3"></h6>
                </div>
            </div>
            <script>
                var icons = new Skycons({"color": "#fff"}),
                    list  = [
                        "clear-night","clear-day", "partly-cloudy-day",
                        "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
                        "fog"
                    ],
                    i;

                for(i = list.length; i--; )
                    icons.set(list[i], list[i]);

                icons.play();
            </script>
        </div>
        <!-- //main -->
        <!-- copyrights -->
    </div>
    <div id="weather" class="col-lg-7 col-md-12" style="height:400px"></div>
    <div class="get_weather_info">
        <script th:inline="javascript">
            (function show1(){

                var location=[[${fh.city}]]
                var temp=[[${fh.tem}]]
                var weacher=[[${fh.wea}]]
                var quality=[[${zl.air_level}]]

                var aq=[[${zl.air}]]
                var pm25=[[${zl.pm25}]]
                var so2=[[${zl.so2}]]
                var no2=[[${zl.no2}]]
                var waichu=[[${zl.waichu}]]
                var o3=[[${zl.o3}]]

                $(".location").text(location);
                $(".temp").text(temp + '°');
                $(".weather").text(weacher);


                $(".quality").text(quality);
                $(".aq").text(aq);
                $(".pm25").text(pm25);
                $(".so2").text(so2);
                $(".no2").text(no2);
                $(".waichu").text(waichu);
                $(".o3").text(o3);
            })();

        </script>
        <script th:inline="javascript">

            var wea=[[${fh.wea}]]
            if (wea.charAt(wea.length-1)=="晴")show1();
            else if (wea.charAt(wea.length-1)=="雨")show2();
            else show3();
            function show1() {
                $("body").css("background", "url(/images/1.jpg) repeat 0px 0px")
            }
            function show2() {
                $("body").css("background", "url(/images/2.jpg) repeat 0px 0px")
            }
            function show3() {
                $("body").css("background", "url(/images/3.jpg) repeat 0px 0px")
            }
        </script>
        <script th:inline="javascript">
            // 初始化天气折线图
            var weather = echarts.init($('#weather').get(0));
            var t1=[[${list1}]];
            var w1=[[${list3}]];
            var w2=[[${list4}]];
            var city=[[${t7.city}]];
            option = {
                title: {
                    text: '未来一周气温',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['最高气温', '最低气温', '湿度']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    scale:true, //纵坐标起始点根据最低值变化
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [{
                    name: '最高气温',
                    type: 'line',
                    data: [],
                    markPoint: {
                        data: [{
                            type: 'max',
                            name: '最大值'
                        }

                        ]
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                },
                    {
                        name: '最低气温',
                        type: 'line',
                        data: [],
                        markPoint: {
                            data: [{
                                type: 'min',
                                name: '最小值'
                            }]
                        },
                        markLine: {
                            data: [{
                                type: 'average',
                                name: '平均值'
                            },

                            ]
                        }
                    }
                ]
            };
            weather.setOption(option);
            // 获取天气信息
            (function show2() {

                    //显示当前城市
                    {option.title.subtext ='当前城市：' +city}
                    //给横坐标复赋值
                    option.xAxis.data = t1

                    option.series[0].data = w1
                    option.series[1].data = w2

                    weather.setOption(option); // 使用刚指定的配置项和数据显示图表。
                })();
        </script>
    </div></div>
<div class="copy-rights wthree">
    <p>© 2021 Weather Report 刘浩钊B测</p>
</div>
</body>
</html>
